<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人信息</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
      color: #333;
    }

    .header {
      background-color: #0078d7;
      color: white;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      display: flex;
      align-items: center;
    }

    .logo-text {
      font-size: 22px;
      font-weight: normal;
    }

    .profile-container {
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .profile-header {
      text-align: center;
      margin-bottom: 30px;
      border-bottom: 1px solid #eee;
      padding-bottom: 15px;
    }

    .profile-info {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .info-item {
      margin-bottom: 15px;
    }

    .info-label {
      font-weight: bold;
      color: #333;
      margin-bottom: 5px;
    }

    .info-value {
      color: #666;
      padding: 8px;
      background-color: #f5f5f5;
      border-radius: 4px;
    }

    .no-data {
      color: #999;
      font-style: italic;
    }

    .nav-bar {
      background-color: #f0f0f0;
      padding: 0 20px;
      border-bottom: 1px solid #ddd;
    }

    .nav-menu {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
    }

    .nav-menu li {
      position: relative;
    }

    .nav-menu a {
      display: block;
      padding: 15px;
      text-decoration: none;
      color: #333;
      transition: background-color 0.3s;
    }

    .nav-menu a:hover {
      background-color: #e0e0e0;
    }

    .dropdown::after {
      content: '▼';
      font-size: 10px;
      margin-left: 5px;
      color: #666;
    }

    .submenu {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
      border-radius: 3px;
      padding: 5px 0;
    }

    .submenu a {
      padding: 10px 15px;
      display: block;
      color: #333;
      text-decoration: none;
    }

    .submenu a:hover {
      background-color: #f5f5f5;
    }

    .nav-menu li:hover .submenu {
      display: block;
    }
  </style>
</head>

<body>
  <!-- 顶部导航栏 -->
  <div class="header">
    <div class="logo">
      <h1 class="logo-text">教学管理信息服务平台</h1>
    </div>
  </div>

  <!-- 二级导航栏 -->
  <nav class="nav-bar">
    <ul class="nav-menu">
      <li><a href="student.html">首页</a></li>
      <li>
        <a href="#" class="dropdown">信息查询</a>
        <div class="submenu">
          <a href="profile.html">查询个人信息</a>
          <a href="#">个人课表查询</a>
          <a href="#">学生成绩查询</a>
          <a href="#">考试信息查询</a>
        </div>
      </li>
    </ul>
  </nav>

  <div class="profile-container">
    <div class="profile-header">
      <h1>个人信息</h1>
    </div>
    <div class="profile-info">
      <div class="info-item">
        <div class="info-label">学号</div>
        <div class="info-value" id="studentId">暂无数据</div>
      </div>
      <div class="info-item">
        <div class="info-label">姓名</div>
        <div class="info-value" id="name">暂无数据</div>
      </div>
      <div class="info-item">
        <div class="info-label">证件类型</div>
        <div class="info-value" id="idType">暂无数据</div>
      </div>
      <div class="info-item">
        <div class="info-label">证件号码</div>
        <div class="info-value" id="idNumber">暂无数据</div>
      </div>
      <div class="info-item">
        <div class="info-label">电话号码</div>
        <div class="info-value" id="phone">暂无数据</div>
      </div>
      <div class="info-item">
        <div class="info-label">籍贯</div>
        <div class="info-value" id="nativePlace">暂无数据</div>
      </div>
      <div class="info-item">
        <div class="info-label">入学日期</div>
        <div class="info-value" id="enrollDate">暂无数据</div>
      </div>
      <div class="info-item">
        <div class="info-label">民族</div>
        <div class="info-value" id="ethnicity">暂无数据</div>
      </div>
      <div class="info-item">
        <div class="info-label">血型</div>
        <div class="info-value" id="bloodType">暂无数据</div>
      </div>
      <div class="info-item">
        <div class="info-label">政治面貌</div>
        <div class="info-value" id="political">暂无数据</div>
      </div>
      <div class="info-item">
        <div class="info-label">性别</div>
        <div class="info-value" id="gender">暂无数据</div>
      </div>
    </div>
  </div>

  <script>
    // 辅助函数：设置URL参数
    function setUrlParam(key, value) {
      const url = new URL(window.location.href);
      url.searchParams.set(key, value);
      window.location.href = url; // 直接跳转刷新页面，确保参数生效
    }
    // 辅助函数：移除URL参数
    function removeUrlParam(key) {
      const url = new URL(window.location.href);
      url.searchParams.delete(key);
      window.history.replaceState({}, '', url);
    }

    // 检查登录状态并自动处理URL
    (function handleStudentIdInUrl() {
      const userInfo = localStorage.getItem('userInfo');
      const urlParams = new URLSearchParams(window.location.search);
      if (userInfo) {
        try {
          const user = JSON.parse(userInfo);
          if (user.student_id && urlParams.get('student_id') !== user.student_id) {
            setUrlParam('student_id', user.student_id);
            return; // 跳转后不再执行后续代码
          }
        } catch (e) { }
      } else {
        // 未登录，移除student_id参数
        if (urlParams.has('student_id')) {
          removeUrlParam('student_id');
        }
      }
    })();

    document.addEventListener('DOMContentLoaded', async () => {
      const urlParams = new URLSearchParams(window.location.search);
      const studentId = urlParams.get('student_id');
      console.log('studentId:', studentId);
      if (!studentId) {
        alert('未指定学号，无法查询个人信息');
        return;
      }
      try {
        const response = await fetch(`/api/profile?student_id=${studentId}`);
        const data = await response.json();
        if (data.code === 0 && data.data) {
          const info = data.data;
          document.getElementById('studentId').textContent = info.student_id || '暂无数据';
          document.getElementById('name').textContent = info.name || '暂无数据';
          document.getElementById('idType').textContent = info.id_type || '暂无数据';
          document.getElementById('idNumber').textContent = info.id_number || '暂无数据';
          document.getElementById('phone').textContent = info.phone || '暂无数据';
          document.getElementById('nativePlace').textContent = info.native_place || '暂无数据';
          document.getElementById('enrollDate').textContent = info.enroll_date || '暂无数据';
          document.getElementById('ethnicity').textContent = info.ethnicity || '暂无数据';
          document.getElementById('bloodType').textContent = info.blood_type || '暂无数据';
          document.getElementById('political').textContent = info.political || '暂无数据';
          document.getElementById('gender').textContent = info.gender || '暂无数据';
        } else {
          [
            'studentId', 'name', 'idType', 'idNumber', 'phone', 'nativePlace', 'enrollDate', 'ethnicity', 'bloodType', 'political', 'gender'
          ].forEach(id => {
            document.getElementById(id).textContent = '暂无数据';
          });
        }
      } catch (error) {
        console.error('获取个人信息失败:', error);
        alert('获取个人信息失败，请稍后重试');
        [
          'studentId', 'name', 'idType', 'idNumber', 'phone', 'nativePlace', 'enrollDate', 'ethnicity', 'bloodType', 'political', 'gender'
        ].forEach(id => {
          document.getElementById(id).textContent = '暂无数据';
        });
      }
    });

    // 监听退出登录（假设有logout按钮，点击后清除userInfo并刷新页面）
    window.logout = function () {
      localStorage.removeItem('userInfo');
      removeUrlParam('student_id');
      location.reload();
    }
  </script>
</body>

</html>